<head>
    <link href="/css/base.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="/js/base.js"></script>
    <script type="text/javascript">
        var myData = ${jsonTimeseries}

        google.load("visualization", "1", {packages:['annotatedtimeline']});
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            var data = new google.visualization.DataTable();
            data.addColumn('date', 'Date');
            var rows = 0;
            for (var i = 0; i < myData.length; i++) {
                data.addColumn('number', myData[i].name);
                data.addColumn('string', 'title' + i);
                data.addColumn('string', 'text' + i);
                rows += myData[i].datapoints.length;
            }
            data.addRows(rows);


            // initialise the counter
            var num = 0;
            // for each timeseries...
            for (var i = 0; i < myData.length; i++) {
                // for each datapoint...
                var datapoints = myData[i].datapoints;
                for (var j = 0; j < datapoints.length; j++) {
                   // set the date
                    data.setValue(num, 0, new Date(datapoints[j].time));
                    // set the value
                    data.setValue(num, (3*i)+1, datapoints[j].value );
                    // add the comment as an annotation (if present)
                    if (datapoints[j].comment) {
                        data.setValue(num, (3*i)+2, myData[i].name);
                        data.setValue(num, (3*i)+3, datapoints[j].comment);
                    }
                    // increment the total number of points added
                    num++;
                }
            }

            var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
                document.getElementById('timeline'));
            annotatedtimeline.draw(data, {'displayAnnotations': true});

        }

    </script>

    <script language="javascript" src="./js/protoplasm-0.2b2/protoplasm.js"></script>
    <script language="javascript">
        // transform() calls can be chained together
        Protoplasm.use('datepicker')
            .transform('input.datepicker', {
                                       timePicker: true,
                                       epoch: true
                                   })

    </script>
</head>

<body>
<a href="/logout">(Logout)</a>

<h2>${timeseries.name}</h2>

${timeseries.description!}
<ol>
<#list timeseries.datapoints as datapoint>
    <div id="datapoint_${datapoint.id}">
        <li>${datapoint.time?datetime}: ${datapoint.value}
            <a class="delete_datapoint" href="/delete-datapoint?id=${datapoint.id}"><img
                    src="/images/delete.png" name="delete entry"/></a>
        </li>
    </div>
</#list>
</ol>
<form class="timeseries_${timeseries.id}_add_datapoint hidden" action="/add-datapoint" method="POST">
    <span>New Datapoint:</span>
    <input type="text" name="value"/>
    <input class="datepicker" type="text" name="datetime"/>
    <input type="text" name="comment" value="comment (optional)"/>
    <input type="hidden" name="timeseriesId" value="${timeseries.id}"/>
    <input type="submit" value="Submit"/>
    <button class="cancel" type="button">Cancel</button>
    <button class="add_datapoint add shown" type="button">Add new datapoint</button>
</form>

<#--<div id="dashboard_div">-->
    <#--<div id="chart_div" style="width: 900px; height: 500px;"></div>-->
    <#--<div id="filter_div"></div>-->
<#--</div>-->
<div id="timeline" style="width: 800px; height: 400px;">

</div>
</body>